<template>
  <table class="inf">
      <tr><th colspan="3">个人信息</th></tr>
      <tr>
        <td>姓名<a-input placeholder="姓名" class="input-1"/></td>
        <td>
          <template>
            <a-radio-group name="radioGroup" :default-value="1">
              <a-radio :value="1">
                男
              </a-radio>
              <a-radio :value="2">
                女
              </a-radio>
            </a-radio-group>
          </template>
        </td>
        <td><div class="blank"></div></td>
    </tr>
    <tr>
      <td>身份证号码<a-input class="input-1"/></td>
      <td>出生日期<a-input class="input-1"/></td>
      <td><div class="blank"></div></td>
    </tr>
    <tr>
      <td>身高<a-input class="input-1"/></td>
      <td>体重<a-input class="input-1"/></td>
      <td><div class="blank"></div></td>
    </tr>
    <tr>
      <td>健康状况<a-input class="input-1"/></td>
      <td>婚姻状况
        <a-select
          label-in-value
          :default-value="{ key: '未婚' }"
          style="width: 200px"
          @change="handleChange"
        >
          <a-select-option value="已婚">
            已婚
          </a-select-option>
          <a-select-option value="未婚">
            未婚
          </a-select-option>
      </a-select></td>
      <td><div class="blank"></div></td>
    </tr>
    <tr>
      <td>民族<a-input class="input-1"/></td>
      <td>
          照片<a-input class="input-1"/>
          <span>
          <a-upload
            list-type="picture"
            action="//jsonplaceholder.typicode.com/posts/"
            :preview-file="previewFile"
          >
            <a-button> <a-icon type="upload" /> 上传 </a-button>
          </a-upload>
  </span>
      </td>
    </tr>
    <tr>
      <td>兴趣爱好<a-input class="input-1"/></td>
      <td>政治面貌<a-input class="input-1"/></td>
      <td><div class="blank"></div></td>
    </tr>
    <tr>
      <td>邮箱<a-input class="input-1"/></td>
      <td>手机号码<a-input class="input-1"/></td>
      <td><div class="blank"></div></td>
    </tr>
    <tr>
      <td>最高学历<a-input class="input-1"/></td>
      <td>所学专业<a-input class="input-1"/></td>
      <td><div class="blank"></div></td>
    </tr>
    <tr>
      <td>想在哪儿工作<a-input class="input-1"/></td>
      <td>现居住地<a-input class="input-1"/></td>
      <td><div class="blank"></div></td>
    </tr>
    <tr>
      <td>求职岗位<a-input class="input-1"/></td>
      <td>期望薪资<a-input class="input-1"/></td>
      <td><div class="blank"></div></td>
    </tr>
    <tr>
      <td colspan="3">
        <div  class="submit">
          <a-button type="primary">
           提交
          </a-button>
          <a-button type="primary">
           保存
          </a-button>
          <a-button type="primary">
           退出
          </a-button>
        </div>
      </td>
    </tr>
  </table>
</template>
<script>
export default {
  name:"personnal-inf",
  methods: {
    handleChange(value) {
      console.log(value); // { key: "lucy", label: "Lucy (101)" }
    },
    previewFile(file) {
      console.log('Your upload file:', file);
      // Your process logic. Here we just mock to the same file
      return fetch('https://next.json-generator.com/api/json/get/4ytyBoLK8', {
        method: 'POST',
        body: file,
      })
        .then(res => res.json())
        .then(({ thumbnail }) => thumbnail);
    },
  },
};
  
</script>
<style scoped>
table{
  border: 1px solid rgb(233, 233, 233);
}
.inf{
  margin: 0 auto;
  width: 800px;
  height: 600px;
  background-color: rgb(247, 245, 245);
}
 .input-1{
     width: 200px;
 }
.inf tr>td{
   text-align: right;
 } 
 .blank{
   width: 100px;
 }
 .submit{
   display: flex;
   justify-content: center;
   align-items: center;
 }
</style>